<script setup lang="ts">
import { ref, reactive,onMounted,isRef,toRaw ,toRefs} from 'vue';

type Person = {
  list?:Array<number>
}
interface interObj {
     name:string
     age:number   
}

const obj = {name:'bal', age:12};

const refsObj = toRefs<interObj>(obj);
refsObj.name.value = 'testaa'

// 变成响应式数据
const reactObj = reactive<interObj>(obj);
// 转成非响应式
const rawOjb = toRaw(reactObj);

rawOjb.age = 33;

console.log(rawOjb,rawOjb.age)


// const ages = toRef(obj, 'age' );

// const toRefsDemo = toRefs(obj);
// const {name, age}  = toRefsDemo;
// name.value = 'lisi';

// // toRefsDemo.name = 'lisi'
// console.log('toRefsDemo', isRef(name), name.value);
// ages.value = 111
// console.log('ages', ages.value, isRef(ages));

onMounted(()=>{
        // console.log('refDom',refDom);
})
function onchange (){
        const arr = [123,2];
        rawOjb.age+=1;
}
</script>
<template>
        <!-- test:{{ages}} -->{{ rawOjb.age }}
        {{ refsObj.name }}

<!-- {{ arrReact.list?.join(',') }} -->
<br/>
<button @click="onchange" ref="refDom">ref button</button>
</template>